<template>
  <div class="location">
    <div class="city" @click="goCity">{{ cityer.currentCity ? cityer.currentCity : '广州' }}</div>
    <div class="position" @click="getLocation">
      <span class="text">我的位置</span>
      <img class="icon" src="../../../assets/img/home/icon_location.png" alt="">
    </div>
  </div>
  <div class="section" @click="show = true">
    <div class="left">
      <span class="small">入住</span>
      {{ before ? before : '2月11日' }}
    </div>
    <div class="middle">
      <span class="small">共{{ diff ? diff : 1 }}晚</span>
    </div>
    <div class="right">
      <span class="small">离店</span>
      {{ after ? after : '2月12日' }}
    </div>
  </div>
  <div class="section1">
    <div class="left">价格不限</div>
    <div class="right">人数不限</div>
  </div>
  <div class="section2">
    <div class="main">关键字/位置/名宿名</div>
  </div>
  <van-calendar :round="false" :style="{ height: '100%' }" v-model:show="show" type="multiple" @confirm="onConfirm" />
  <div class="hotWord">
    <div class="word" :style="{ color: item.tagText.color, backgroundColor: item.tagText.background.color }"
      v-for="(item, i) in homer.hotCitys" :key="i">
      {{ item.tagText.text }}
    </div>
  </div>
  <div class="search">
    <div class="btn" @click="goSearch">开始搜索</div>
  </div>
</template>
<script setup>
import { useRouter } from 'vue-router';
import { ref, onMounted } from 'vue'
import { diffTime, formerTime } from '../../../utils/dataFormal'
import { useCity } from '../../../Pinia/modules/city';
import { useHome } from '../../../Pinia/modules/home'
import { useTime } from '../../../Pinia/modules/time';
const cityer = useCity();
const homer = useHome();
const timer = useTime()
homer.getHotWord()
const router = useRouter();
// 获取定位
function getLocation() {
  navigator.geolocation.getCurrentPosition(success => {
    console.log('获取成功' + success.coords);
  }, error => {
    console.log('获取失败' + error);
  }, {
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0
  })
}
// 日历
const show = ref(false);
let diff = ref(0);
let after = ref(0)
let before = ref(0)
const onConfirm = (dates) => {
  show.value = false;
  console.log(dates[0]);
  console.log(dates[1]);
  if (dates.length == 2) {
    // var duration = dayjs(dates[1]).diff(dates[0], "day");
    diff.value = diffTime(dates[1], dates[0]);
    after.value = formerTime(dates[1]);
    before.value = formerTime(dates[0]);
    timer.startDate = dates[0];
    timer.endDate = dates[1];
  }
};
// 跳转到城市页
function goCity() {
  router.push('/city')
}
// 跳转到搜索页
function goSearch() {
  router.push({
    path: '/search',
    query: {
      endTime: before.value ? before.value : '2月19日',
      startTiem: after.value ? after.value : '2月14日',
      currentCity: cityer.currentCity
    }
  })
}
onMounted(() => {
  before.value = formerTime(timer.startDate);
  after.value = formerTime(timer.endDate);
})
// let val = ref('男角儿');
// console.log(val);
// let ls = reactive({
//   name: '女主角'
// })
// console.log(ls);
// var duration = dayjs.duration(x.diff(y))
</script>
<style scoped>
.location,
.section,
.section1,
.section2 {
  display: flex;
  align-items: center;
  height: 45px;
  padding: 0 20px;
  justify-content: space-between;
  font-size: 15px;
  border-bottom: 1px solid #faf8f9;
}

.section {
  padding: 0 55px 0 20px;
}

.section1 .left,
.section1 .right {
  color: gray;
}

.section1 .right {
  margin-right: 36px;
}

.section1,
.section2 {
  font-size: 14px;
}

.text {
  font-size: 12px;
  margin-right: 8px;
  color: gray;
}

.small {
  font-size: 10px;
  color: gray;
}

.left,
.right {
  height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.main {
  color: gray;
}

.icon {
  width: 18px;
}

.hotWord {
  margin: 10px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0 20px;
  color: #999;
}

.word {
  padding: 4px 8px;
  margin: 4px;
  border-radius: 14px;
  font-size: 12px;
  line-height: 1;
}

.search {
  padding: 0 20px;
}

.btn {
  background-color: orange;
  width: 342px;
  height: 38px;
  max-height: 50px;
  font-weight: 500;
  font-size: 18px;
  line-height: 38px;
  text-align: center;
  border-radius: 20px;
  color: #fff;
}
</style>